/*
   crab.css
   <project>
   
   Created by lenovo on 2018-03-20.
   Copyright 2018 lenovo. All rights reserved.
*/

div.banner{
	width: 100%;
	height: 580px;
	background-image: url(../img/crab-banner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
div.crab-main{
	width: 100%;
	height: 2513px;
	position: relative;
	background-image: url(../img/crab-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
img.crab-Icon{
	width: 230px;
	height: 52px;
	position: absolute;
	left: 50%;
	margin-left: -115px;
	top: 70px;
}
div.crab-tab{
	height: 350px;
	width: 100%;
	padding-top: 174px;
	text-align: center;
	margin-bottom: 80px;
}
div.crab-tabber{
	display: inline-block;
	cursor: pointer;
}
div.gift{
	width: 156px;
	height: 350px;
	background-image: url(../img/crab-gift.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-right: 240px;
}
div.gift.check{
	background-image: url(../img/crab-gift1.png);
}
div.card{
	width: 172px;
	height: 350px;
	background-image: url(../img/crab-card1.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
div.card.check{
	background-image: url(../img/crab-card.png);
}
div.crabBox{
	display: inline-block;
	width: 280px;
	height: 350px;
	border-radius: 10px;
	margin-right: 10px;
	margin-bottom: 26px;
	cursor: pointer;
}

div.crabBox img{
	width: 100%;	
	border-radius: 10px;
}

div.crabBox:hover img{
	box-shadow: 0px 8px 17px 3px rgba(43, 42, 42, 0.42);
}

div#card{
	display: none;
}
